<!-- 储值统计报表 -->
<template>
  <div class="common-body-wrapper">
    <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" @handleChange="handleSearchChange"
    :isCheckbox="true" :isNeedTree="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>

    <div class="common-table-tree-wrapper">
      <!-- <table-tree :isCheckbox="true" :isNeedTree="isNeedTree" :paramName="paramName" @toggleTreeBox="toggleTreeBox" @setSelectedNode="setSelectedNode" @searchFn="getList">
      </table-tree> -->
      <div class="common-table-wrapper">

        <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
          <!--按钮-->
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a class="ake_btn ake_btn_text" v-if="isPermmited('REPORT:STORE_VALUE:EXPORT')" @click.prevent="exportData()">导出</a>
          </div>

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">

            <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
              <template v-for="(item, index) in props.children">
                <el-table-column v-if="item.checked" :key="index" :label="item.text" :min-width="item.minWidth">
                  <template slot-scope="scope">
                    <span v-if="item.prop=='originOtherCount' || item.prop=='originOtherAmount'">
                      <a class="imgLink" @click="openOriginOther(scope.row,'origin_other_modal')">
                        查看
                      </a>
                    </span>
                    <span v-else-if="item.prop=='modeOtherCount' || item.prop=='modeOtherAmount'">
                      <a class="imgLink" @click="openModeOther(scope.row,'mode_other_modal')">
                        查看
                      </a>
                    </span>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>

            </el-table-column>

            <el-table-column v-else :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop && scope.$index==0">合计</span>
                <span v-else-if="'reno' == props.prop && scope.$index!=0">{{ scope.$index }}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>

          <!--操作列内的按钮-->
          <!-- <template slot="operateCell" slot-scope="props">
                    <el-table-column :fixed="props.fixed" :label="props.label" min-width="130">
                        <template slot-scope="scope">
                            <el-button title="确认收款" size="small" type="primary" class="ake_btn ake_font_btn ake_btn_green" icon="circle-check" v-if="isPermmited('REPORT:PAY:CONFIRM_CHARGE') && scope.row.status=='FINISH_PAY'" @click="confirmOnlineReceipts(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </template> -->
        </multi-fun-table>

        <!---->
        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <basic-modal ref="origin_other_modal" static="true" width="700">
      <h3 slot="title">其他支付来源详情</h3>
      <div class="ModalBody" slot='modal-body'>
        <div class="tableDetial">
          <el-table :data="originOtherData.list" border style="width: 100%" fit>
            <el-table-column type="index" label="序号" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="name" label="支付来源" width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="count" label="次数(百分比)" width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="amount" label="金额(百分比)" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('origin_other_modal')">确定</button>
      </div>
    </basic-modal>

    <basic-modal ref="mode_other_modal" static="true" width="700">
      <h3 slot="title">其他支付方式详情</h3>
      <div class="ModalBody" slot='modal-body'>
        <div class="tableDetial">
          <el-table :data="modeOtherData.list" border style="width: 100%" fit>
            <el-table-column type="index" label="序号" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="name" label="支付方式" width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="count" label="次数(百分比)" width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="amount" label="金额(百分比)" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('mode_other_modal')">确定</button>
      </div>
    </basic-modal>

  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
//import '../../assets/js/libs/moment.min.js'
// import BigPicModal from '@components/widgets/BigPicModal.vue'

// image
// import images from '@mixins/image.js'

// 引进vue的js
import store_value_report from "./js/store_value_report.js";

export default {
  mixins: [common, stardardList, invokeModal, store_value_report],
  data() {
    var today = [
      new Date(
        moment()
          .add(-7, "days")
          .format("YYYY-MM-DD 00:00:00")
      ),
      new Date(
        moment()
          .add(1, "days")
          .format("YYYY-MM-DD 00:00:00")
      )
    ];
    return {
      total: 0,
      fixedCols: 0,
      paramName: "parkIds",
      searchList: [
        {
          index: 0,
          isShow: true,
          type: "text",
          name: "query_carOwner",
          propName: "carOwner",
          text: "车主姓名",
          value: ""
        },
        {
          index: 1,
          isShow: true,
          type: "text",
          name: "query_telphone",
          propName: "telphone",
          text: "手机号码",
          value: ""
        },
        {
          index: 2,
          isShow: true,
          type: "text",
          name: "query_carCode",
          propName: "carCode",
          text: "车牌号码",
          value: ""
        },
        {
          index: 3,
          isShow: true,
          type: "text",
          name: "query_customVipName",
          propName: "customVipName",
          text: "VIP名称",
          value: ""
        },
        {
          index: 4,
          format: "yyyy-MM-dd HH:mm:ss",
          isShow: true,
          type: "datePicker",
          name: "dateFromTo",
          propName: "reportTimeFrom,reportTimeTo",
          text: "日期",
          value: "",
          style: { width: "360px" }
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "carOwner",
          text: "车主姓名",
          minWidth: 200
        },
        {
          index: 2,
          isShow: false,
          prop: "telphone",
          text: "手机号码",
          minWidth: 200
        },
        {
          index: 3,
          isShow: false,
          prop: "carCode",
          text: "车牌号码",
          minWidth: 200
        },
        {
          index: 4,
          isShow: false,
          prop: "cardCode",
          text: "卡号",
          minWidth: 200
        },
        {
          index: 5,
          isShow: false,
          prop: "customVipName",
          text: "VIP名称",
          minWidth: 200
        },
        {
          index: 6,
          isShow: false,
          prop: "parkName",
          text: "所属停车场",
          minWidth: 200
        },
        {
          index: 7,
          isShow: false,
          prop: "reportTimeStr",
          text: "统计区间",
          minWidth: 200
        },
        {
          index: 8,
          isShow: false,
          prop: "accountValueBeforeFromTime",
          text: "期初储值",
          minWidth: 200
        },
        {
          index: 9,
          isShow: false,
          prop: "",
          text: "账户金额冲正",
          minWidth: 110,
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "rechargeAccount",
              text: "充值储值",
              minWidth: 200
            },
            {
              index: 1,
              isShow: false,
              prop: "rechargeAmount",
              text: "充值金额",
              minWidth: 200
            },
            {
              index: 2,
              isShow: false,
              prop: "adjustAccount",
              text: "误差调整储值",
              minWidth: 200
            },
            {
              index: 3,
              isShow: false,
              prop: "refundAccount",
              text: "储值退款",
              minWidth: 200
            },
            {
              index: 4,
              isShow: false,
              prop: "refundAmount",
              text: "退款金额",
              minWidth: 200
            }
          ]
        },
        {
          index: 10,
          isShow: false,
          prop: "total",
          text: "小计",
          minWidth: 150
        },
        {
          index: 11,
          isShow: false,
          prop: "accountValueSpend",
          text: "账户储值消费",
          minWidth: 200
        },
        {
          index: 12,
          isShow: false,
          prop: "accountValueBalance",
          text: "账户储值结余",
          minWidth: 200
        }
      ],
      tbodysInfo: []
    };
  },
  filters: {
    formatBillStatus: function(billStatus) {
      return billStatus == 2 ? "已支付" : "未支付";
    }
  }
};
</script>

<style lang="less">

.user-row-modal {
  .modal-body {
    min-height: 400px;
  }
  .first-item {
    width: 240px;
  }
}

.role-select {
  width: 240px;
}

#parkNameListModal {
  min-height: 400px;
}
</style>